<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/jquery-3.1.1.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<style type="text/css">
			div {
				width: 300px;
				margin: 100px auto;
			}
			ul{
				display: flex;
				justify-content: space-around;
			}
			li{
				list-style: none;
			}
		</style>
	</head>

	<body>
		<div class="input-group">
			<input type="text" class="form-control" placeholder="请输入城市名"/>
			<span class="input-group-addon">搜索</span>
		</div>
		<ul>
			
			
		</ul>
	</body>
	<script>
		var spn=document.getElementsByTagName('span')[0]
		var ipt=document.getElementsByTagName('input')[0]
		var ul=document.getElementsByTagName('ul')[0]
		
		
		
		spn.onclick=function(){
			var xhr=new XMLHttpRequest()
			xhr.open("get", "weather/baiduWeather.php?city="+ipt.value,true)
			xhr.send()
			xhr.onreadystatechange = function() {
			if(xhr.status == 200 && xhr.readyState == 4) {
//					console.log(xhr.responseText)
					var json=JSON.parse(xhr.responseText)
//					console.log(json)
					var arr=json.results[0].weather_data
					console.log(arr[0].date)
					ul.innerHTML=""
					for (var i=0;i<arr.length;i++) {
						var oli=document.createElement("li");
						oli.innerHTML='<h3>'+arr[i].date+'</h3><p>白天:<img src="'+arr[i].dayPictureUrl+'"/></p><p>夜晚：<img src="'+arr[i].nightPictureUrl+'"/></p><p>气温：'+arr[i].temperature+'</p><p>天气：'+arr[i].weather+'</p><p>风力：'+arr[i].wind+'</p>'
						ul.appendChild(oli)
					}
					
				}
			}
		}

		
	</script>

</html>